<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-08-27 17:33:45
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-27 17:36:24
 * @FilePath: /react18-vite-admin/index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite + React + TS</title>
    </head>
    <body>
        <body>
            <div id="app">
                <div class="loader"></div>
            </div>
        </body>
        <!-- <script type="module" src="/src/main.ts"></script> -->

        <style>
            html,
            body,
            #app {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

            .loader {
                position: relative;
                width: 40px;
                aspect-ratio: 0.577;
                overflow: hidden;
                clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
                animation: l19 2s infinite linear;
            }

            .loader::before {
                position: absolute;
                inset: -150%;
                content: '';
                background: repeating-conic-gradient(
                    from 30deg,
                    #ffabab 0 60deg,
                    #abe4ff 0 120deg,
                    #ff7373 0 180deg
                );
                animation: inherit;
                animation-direction: reverse;
            }

            @keyframes l19 {
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
        <script type="module" src="/src/main.tsx"></script>
    </body>
</html>
